import type { VbenFormProps, VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { queryPage, setStatus } from './api';
import { ref } from 'vue';
import { z } from '#/adapter/form';

// 操作id
export const idKey = ref('sliderId');
export const handleId = ref('');

// 表格表单数据
export const formOptions: VbenFormProps = {
  schema: [
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'sliderTitle',
      label: '标题',
    },
  ],
  wrapperClass: 'grid-cols-5',
  showCollapseButton: false,
};

// 表格数据
export const gridOptions: VxeTableGridOptions = {
  rowConfig: {
    height: 80,
  },
  columns: [
    { title: '序号', type: 'seq', width: 80 },
    {
      title: '封面图',
      field: 'sliderImg',
      align: 'center',
      cellRender: {
        name: 'CellImageViewer',
        props: { width: '160px', height: '60px' },
      },
      width: 200,
    },
    { title: '标题', field: 'sliderTitle', align: 'left' },
    {
      title: '类型',
      field: 'sliderType',
      cellRender: {
        name: 'CellDict',
        props: {
          dictData: [
            { label: '首页', value: 1 },
            /* { label: '微馆推荐', value: 2 },*/
          ],
        },
      },
      width: 120,
    },
    {
      title: '跳转方式',
      field: 'jumpType',
      cellRender: {
        name: 'CellDict',
        props: {
          dictData: [
            { label: '外部跳转', value: 1 },
            { label: '图文内容', value: 2 },
            { label: '无跳转', value: 3 },
          ],
        },
      },
      width: 140,
    },
    {
      title: '显示',
      field: 'sendStatus',
      cellRender: {
        name: 'CellSwitch',
        props: {
          idKey: idKey.value,
          checkedValue: 1,
          changeQuery: setStatus,
        },
      },
      width: 120,
    },
    { title: '排序', field: 'sortOrder', align: 'center', width: 100 },
    { title: '创建时间', field: 'createTime', align: 'center', width: 200 },
    { slots: { default: 'action' }, title: '操作', width: 160 },
  ],
  minHeight: '100%',
  maxHeight: '100%',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await queryPage({
          page: page.currentPage,
          limit: page.pageSize,
          ...formValues,
        });
      },
    },
    response: {
      result: 'data.records',
      total: 'data.total',
      list: 'data.records',
    },
  },
  pagerConfig: {
    enabled: true,
    pageSize: 20,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    import: false,
    refresh: true,
    zoom: true,
  },
};

// 编辑弹窗表单配置
export const drawerFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    defaultValue: '',
    fieldName: idKey.value,
    label: '轮播图id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入轮播图标题',
      allowClear: true,
    },
    fieldName: 'sliderTitle',
    label: '轮播图标题',
    rules: 'required',
  },
  {
    component: 'Select',
    defaultValue: 1,
    componentProps: {
      allowClear: true,
      options: [
        {
          label: '首页',
          value: 1,
        },
        /*{
          label: '微馆推荐',
          value: 2,
        },*/
      ],
      placeholder: '请选择轮播图类型',
    },
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
    fieldName: 'sliderType',
    label: '轮播图类型',
    rules: 'required',
  },
  {
    component: 'RadioGroup',
    componentProps: {
      options: [
        { label: '外部跳转', value: 1 },
        { label: '图文内容', value: 2 },
        { label: '无跳转', value: 3 },
      ],
    },
    fieldName: 'jumpType',
    label: '跳转方式',
    rules: 'required',
    defaultValue: 3,
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入跳转网址以http://或https://开头',
      allowClear: true,
    },
    // help: '请输入跳转网址以http://或https://开头',
    description: '请输入跳转网址以http://或https://开头',
    fieldName: 'linkUrl',
    label: '跳转网址',
    rules: 'required',
    dependencies: {
      show(values) {
        return values.jumpType == 1;
      },
      triggerFields: ['jumpType'],
    },
  },
  {
    component: 'TinymceEditor',
    fieldName: 'content',
    label: '图文内容',
    rules: 'required',
    dependencies: {
      show(values) {
        return values.jumpType == 2;
      },
      triggerFields: ['jumpType'],
    },
  },
  {
    component: 'RadioGroup',
    componentProps: {
      options: [
        {
          label: '发布',
          value: 1,
        },
        {
          label: '下架',
          value: 0,
        },
      ],
    },
    fieldName: 'sendStatus',
    defaultValue: 1,
    label: '发布状态',
    rules: 'required',
  },
  {
    component: 'InputNumber',
    fieldName: 'sortOrder',
    componentProps: {
      class: 'w-2/5',
    },
    label: '排序值',
    rules: 'required',
    defaultValue: 99,
  },
  {
    component: 'ImageUpload',
    fieldName: 'sliderImg',
    description: '图片建议尺寸1920*660',
    label: '图片',
    rules: z.string().min(1, { message: '请上传图片，图片建议尺寸1920*660' }),
  },
];
